<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      defer
      src="https://cdn.bootcss.com/react/16.8.0-alpha.1/umd/react.production.min.js"
    ></script>
    <script
      defer
      src="https://cdn.bootcss.com/react-dom/16.8.0-alpha.1/umd/react-dom.production.min.js"
    ></script>
    <script
      defer
      src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"
    ></script>
    <script defer type="text/babel">
      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = { index: 0, vs: [], value: "" };
        }

        render() {
          return (
            <div>
              <textarea id="vJson" ref={e => (this.rText = e)} />
              <button
                id="btnInject"
                onClick={() => {
                  try {
                    window.vS = this.vS = JSON.parse(this.rText.value);
                    this.setState({
                      index: 0,
                      vs: window.vS
                    });
                  } catch (e) {
                    alert("注入失败");
                  }
                }}
              >
                注入全局
              </button>
              <hr />
              <input id="vIndex" value={this.state.index} />
              <button
                id="btnUp"
                onClick={() => {
                  let len = Array.isArray(this.vS) ? this.vS.length : 0;
                  if (this.state.index - 1 < 0) return;
                  this.setState({
                    index: this.state.index - 1
                  });
                }}
              >
                上一下
              </button>
              <button
                id="btnDown"
                onClick={() => {
                  let len = Array.isArray(this.vS) ? this.vS.length : 0;
                  if (this.state.index + 1 >= len) return;
                  this.setState({
                    index: this.state.index + 1
                  });
                }}
              >
                下一下
              </button>
              <hr />
              当前值：
              <input
                id="cp"
                value={
                  JSON.stringify(this.state.vs[this.state.index]) || "无数据"
                }
              />
              <textarea
                id="ccp"
                // style={{ display: "none" }}
                value={this.state.value}
                ref={e => (this.ccp = e)}
              />
              <hr />
              <button
                id="btnCName"
                onClick={() => {
                  let len = Array.isArray(this.vS) ? this.vS.length : 0;
                  let value = this.state.vs[this.state.index];

                  // this.ccp.value = value.name;
                  this.setState({ value: value.name });
                  setTimeout(() => {
                    this.ccp.select();
                    document.execCommand("Copy");
                  }, 0);
                }}
              >
                复制名称
              </button>
              <button
                id="btnCMsg"
                onClick={() => {
                  let len = Array.isArray(this.vS) ? this.vS.length : 0;
                  let value = this.state.vs[this.state.index];

                  this.setState({ value: value.message });
                  setTimeout(() => {
                    this.ccp.select();
                    document.execCommand("Copy");
                  }, 0);
                }}
              >
                复制内容
              </button>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
    <script>
      // document.addEventListener('click', () => {

      // })
      // btnInject.addEventListener("click", () => {
      //   try {
      //     window.vS = JSON.parse(vJson.value);
      //     window.index = 0;
      //     vIndex.value = 0;
      //   } catch (e) {
      //     alert("注入失败");
      //   }
      // });
      // btnDown.addEventListener("click", () => {
      //   // if()
      //   // vIndex.value = ;
      // });
    </script>
  </body>
</html>
